<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            #box1{
                width: 500px;
                height: 500px;
                background-color: yellowgreen;
                position:relative;
                padding-top:300px;

            }
            #box2{
                width: 300px;
                background-color: skyblue;
                position:relative;
                padding-top:100px;
                margin-top: 100px;

            }
            #box3{
                width: 60px;
                height: 60px;
                background-color: gold;
                position:relative;
                top:20px;

            }
        </style>
    </head>
    <body>
        <div id="box1">
            <div id="box2">
                <div id="box3">
                    <p>我是文字！</p>
                </div>
            </div>
        </div>
    </body>
    <script type="text/javascript">
        var box1 = document.getElementById("box1");
        var box2 = document.getElementById("box2");
        var box3 = document.getElementById("box3");

        //返回这个元素在页面中的净位置
        //就是这个元素所有的offsetParent的offsetTop
        function getAllTop(obj){
            //累加器 ，累加器的初始值不是0，而是自己现在的offsetTop值

            var allTop = obj.offsetTop;

            //当前正在算高度的元素
            var currentObj = obj;

            while(currentObj =currentObj.offsetParent){
                allTop+=currentObj.offsetTop;
            }

            return allTop;

        }

            alert(getAllTop(box1));
            alert(getAllTop(box2));
            alert(getAllTop(box3));

    </script>
</html>